<template>
	<view class="u-flex " v-if="dropDownShopList.length != 0">
		<image :src="storeShop.logoUrl?storeShop.logoUrl:'https://cdn.shan-niang.com/shops/mendiantouxiang.png'" mode="" class="shop-logo"></image>
		<fui-dropdown-menu class="drop-item" :isCheckbox="false" selectedColor="#FF2B2B" splitLine :options="dropDownShopList"
			ref="ddmTag" @click="e=>switchShopFn(e.id,pageUrl)"  size="28" minWidth="400" isFull >
			<view class="u-flex fui-flex__between" @tap="tagTap">
				<text class="u-font-34">{{hideLongStr(storeShop.name)}}</text>
				<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
					<fui-icon name="arrowdown" :size="42"></fui-icon>
				</view>
			</view>
		</fui-dropdown-menu>
	</view>
</template>

<script>
	import {useShopStore} from '@/store/shop.js';
	import { mapState } from 'pinia'
	export default {
		computed: {
			...mapState(useShopStore, {
				  storeShop: 'shop',
				  dropDownShopList(store){
					  const res = store.shopList
					  if (!res) return
					  let arr = []
					  for (let i = 0; i < res.length; i++) {
					  	arr.push({
					  		text: res[i].name,
					  		id: res[i].id
					  	})
					  }
					  return arr
				  },
			}),
		},
		data() {
			return {
				tagShow: false,
			}
		},
		props:{
			pageUrl:{
				type: String,
				default: '/pages/index/index'
			}
		},
		mounted() {
		},
		methods: {
			switchShopFn(id,pageUrl) {
				this.switchShop(id,pageUrl);
				this.$emit('change');
			},
			hideLongStr(str) {
				if (str.length > 10) {
					return str.substring(0, 10) + '...';
				} else {
					return str;
				}
			},
			tagTap() {
				this.$refs.ddmTag.show()
				this.tagShow =true;
			}
		}
	}
</script>

<style lang="scss">
	.drop-item{
		position: absolute;
		left: 0;
		padding-left: 100rpx;
		::v-deep .u-dropdown__menu__item{
			justify-content: flex-start;
			box-sizing: border-box;
			padding-left: 100rpx;
		}
		::v-deep .u-dropdown__content__popup{
			height: 600rpx;
			width: 100%;
			.u-dropdown-item{
				width: 100%;
			}
		}
	}
	.shop-logo{
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		box-shadow: 0px 0px 18px 2px rgba(8,1,3,0.1);
		background-color: #fff;
	}  
	.fui-filter__icon {
		flex-shrink: 0;
		transition: all .15s linear;
	}
	
	.fui-icon__ani {
		transform: rotate(180deg);
	}
	
</style>